<template>
  <div class="wrap" id="children">
    <el-dialog
      title="注销"
      :visible.sync="state"
      @close="close"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form>
        <el-form-item label="管理员登陆密码:" :label-width="formLabelWidth">
          <el-input placeholder="请输入登陆密码" v-model="password"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="account" placeholder="请输入输入管理员绑定手机号"></el-input>
        </el-form-item>
        <el-form-item label="验证码" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="checkCode" placeholder="请输入手机验证码"></el-input>
          <el-button type="primary" @click="getSendMS">{{ms}}</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="close(1)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { sendCode } from "@/utils/interface";
export default {
  props: {
    ressetState: {
      type: Boolean,
      default: false
    },
    userId:{
      type:null,
      default:""
    }
  },
  data() {
    return {
      formLabelWidth: "140px",
      imageUrl: "",
      account: "",
      password: "",
      checkCode: "",
      bok: true,
      ms: "发送验证码"
    };
  },
  computed: {
    state: {
      get() {
        return this.ressetState;
      },
      set() {}
    }
  },
  methods: {
    close(v) {
      if (v) {
        if (!/^1[3456789]\d{9}$/.test(this.account)) {
          this.$alert("请填写手机号", "提示", {
            confirmButtonText: "确定"
          });
          return false;
        }
        if(!this.password){
          this.$alert("请填写管理员登陆密码", "提示", {
            confirmButtonText: "确定"
          });
          return false;
        }
        if(!this.checkCode){
          this.$alert("请填写手机验证码", "提示", {
            confirmButtonText: "确定"
          });
          return false;
        }
        this.$emit("resetData",{userId:this.userId,account:this.account,password:this.password,checkCode:this.checkCode});
      } else {
        this.$emit("resetData");
      }
    },
    // 获取验证码
    getSendMS() {
      if (!/^1[3456789]\d{9}$/.test(this.account)) {
        this.$alert("手机号码有误，请重填", "提示", {
          confirmButtonText: "确定"
        });
        return false;
      }
      if (!this.bok) {
        return false;
      }
      this.bok = false;
      let n = 60;
      sendCode({ account: this.account }).then(res => {
        let timer = setInterval(() => {
          this.ms = `${n}秒后重新获取`;
          n--;
          if (n <= 0) {
            this.bok = true;
            this.ms = "重新获取验证码";
            n = 60;
            clearInterval(timer);
          }
        }, 1000);
      });
    },
    handleAvatarSuccess(res, file) {
      console.log(file);
      this.imageUrl = URL.createObjectURL(file.raw);
    }
  }
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 240px;
}
.el-dialog {
  width: 50% !important;
}
</style>
<style lang="scss">
#children .el-dialog {
  width: 40% !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>